import React from 'react';
import PropTypes from 'prop-types'
import * as d3 from 'd3';
import * as d3Tip from 'd3-tip';
import './Chart.less'


class D3GroupedBarChart extends React.Component {
  componentDidMount() {

    let width = 1296
    let height = 917

    let svg = d3.select(this.chartRef)
      .append('svg')
      .attr('width', width)
      .attr('height', height)


    //绘制剪裁区域  //剪裁 暂时有问题
    svg.append("defs").append("clipPath").attr("id", "clip")
      .append('rect')
      .attr('width', '120').attr('height', '65').attr('rx', '16').attr('ry', '16')


    // 绘制开始 结束 按钮
    this._renderButton(svg, {point: {x: 131, y: 45}, buttonColor: '#3F91F7', buttonText: "开始"})
    this._renderButton(svg, {point: {x: 345, y: 829}, buttonColor: '#94C4FF', buttonText: "结束"})
    // 绘制 审批 按钮
    this._renderApproval(svg, {point: {x: 588, y: 137}})


    //绘制箭头 //绘制所有折线
    const defs = svg.append("defs");
    const arrowMarker = defs.append("marker")
      .attr("id", "arrow")
      .attr("markerUnits", "strokeWidth")
      .attr("markerWidth", "12")
      .attr("markerHeight", "12")
      .attr("viewBox", "0 0 12 12")
      .attr("refX", "6")
      .attr("refY", "6")
      .attr("orient", "auto");
    const arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";
    arrowMarker.append("path")
      .attr("d", arrow_path)
      .attr("fill", "#3F91F7");

    this._renderLine(svg, {path: "582,154 247,154"}) //审批到计划管理

    this._renderLine(svg, {path: "174,83 174,121"}) //开始到计划管理
    this._renderLine(svg, {path: "80,167 80,227"}) //计划管理 到 采购方式变更
    this._renderLine(svg, {path: "109,158 12,158 12,336 80,336 80,360"}) //计划管理 到 进口产品审批 因为有阴影
    this._renderLine(svg, {path: "80,305 80,325 153,325 153,455 80,455", hasNoEnd: true}) //计划管理 到 进口产品审批 因为有阴影
    this._renderLine(svg, {path: "80,429 80,500 104,500"}) //进口产品审批 到 委托单
    this._renderLine(svg, {path: "174,202 174,460"}) //计划管理 到 委托单
    this._renderLine(svg, {path: "174,545 174,567 387,567 387,596"}) //委托单 到 委托受理分配
    this._renderLine(svg, {path: "387,670 387,708"}) // 委托受理分配 到 立项
    this._renderLine(svg, {path: "387,783 387,820"}) // 委托受理分配 到 立项

    this._renderLine(svg, {path: "258,0 258,917", stroke: "#e8e8e8", hasNoEnd: true}) // 竖线
    this._renderLine(svg, {path: "515,0 515,917", stroke: "#e8e8e8", hasNoEnd: true}) // 竖线
    this._renderLine(svg, {path: "775,0 775,917", stroke: "#e8e8e8", hasNoEnd: true}) // 竖线
    this._renderLine(svg, {path: "1032,0 1032,917", stroke: "#e8e8e8", hasNoEnd: true}) // 竖线


    //绘制采购方式变更按钮s
    this._renderItem(svg, {
      point: {x: 119, y: 127},
      topColor: '#94C4FF',
      topText: "计划管理",
      buttomColor: '#595959',
      buttomText: '2018-12-12 09:00'
    })
    this._renderItem(svg, {
      point: {x: 21, y: 236},
      topColor: '#57BFC0',
      topText: "采购方式变更",
      buttomColor: '#595959',
      buttomText: '未进行'
    })
    this._renderItem(svg, {
      point: {x: 21, y: 370},
      topColor: '#57BFC0',
      topText: "进口产品审批",
      buttomColor: '#595959',
      buttomText: '不需进行'
    })
    this._renderItem(svg, {
      point: {x: 119, y: 470},
      topColor: '#94C4FF',
      topText: "委托单",
      buttomColor: '#595959',
      buttomText: '2018-12-12 09:00'
    })
    this._renderItem(svg, {
      point: {x: 329, y: 604},
      topColor: '#94C4FF',
      topText: "委托受理/分配",
      buttomColor: '#ff0000',
      buttomText: '进行中'
    })
    this._renderItem(svg, {
      point: {x: 329, y: 718},
      topColor: '#94C4FF',
      topText: "立项",
      buttomColor: '#595959',
      buttomText: '进行中'
    })

  }

  _renderButton = (svg, item) => {
    const {point, buttonColor, buttonText} = item;
    const {x, y} = point;
    const button = svg.append('g')
    button.append('rect')
      .attr('x', x).attr('y', y)
      .attr('rx', '16').attr('ry', '16').attr('width', '88').attr('height', '32').attr('fill', buttonColor)
    button.append('text')
      .attr('x', x).attr('y', y)
      .attr('fill', '#fff').attr('font-size', '16px').attr('font-weight', '500')
      .attr("transform", "translate(" + 45 + "," + 20 + ")")
      .attr('text-anchor', 'middle')
      .text(buttonText);
  }

  _renderApproval = (svg, item) => {
    const {point} = item;
    const {x, y} = point;
    const button = svg.append('g')
    button.append('rect')
      .attr('x', x).attr('y', y)
      .attr("stroke", "#57BFC0").attr('rx', '6').attr('ry', '6').attr('width', '120').attr('height', '45').attr('fill', "none")
    button.append('rect')
      .attr('x', x).attr('y', y)
      .attr("transform", "translate(" + 22 + "," + 0 + ")")
      .attr("stroke", "#57BFC0").attr('width', '76').attr('height', '45').attr('fill', "none")
    button.append('text')
      .attr('x', x).attr('y', y)
      .attr('fill', '#57BFC0').attr('font-size', '14px').attr('font-weight', '400')
      .attr("transform", "translate(" + 60 + "," + 26 + ")")
      .attr('text-anchor', 'middle')
      .text("审批");
  }

  _renderItem = (svg, item) => {
    const {point, topColor, topText, buttomColor, buttomText} = item
    const {x, y} = point;
    const itemCell = svg.append('g').on("click", function(){
      alert(topText)
    });
    itemCell.append('rect')
      .attr('x', x).attr('y', y)
      .attr('width', 120).attr('height', 32).attr('fill', topColor);
    itemCell.append('text')
      .attr('x', x).attr('y', y)
      .attr('fill', '#fff').attr('font-size', '14px').attr('font-weight', '400')
      .attr("transform", "translate(" + 60 + "," + 20 + ")")
      .attr('text-anchor', 'middle')
      .text(topText);
    itemCell.append('rect')
      .attr('x', x).attr('y', y + 32)
      .attr('width', 120).attr('height', 32).attr('fill', '#e5e5e5')
    itemCell.append('text')
      .attr('x', x).attr('y', y + 32)
      .attr('fill', buttomColor).attr('font-size', '12px').attr('font-weight', '400')
      .attr("transform", "translate(" + 60 + "," + 20 + ")")
      .attr('text-anchor', 'middle')
      .text(buttomText);

    // itemCell.attr('clip-path', 'url(#clip)')//剪裁 暂时有问题
  }

  _renderLine = (svg, item) => {
    const {path, stroke, hasNoEnd} = item;
    const line = svg.append("polyline")
      .attr("points", path)
      .attr("stroke", stroke || "#3F91F7")
      .attr("stroke-width", 2)
      .attr("fill", "none")
    !hasNoEnd && line.attr("marker-end", "url(#arrow)");
  }

  render() {
    return (
      <div className="charts-container">
        <div className="charts-container-title">
          {
            ["采购人","代理机构","财政部门","供应商","专家评审"].map((item,index)=>{

              return(<div className={`charts-container-title-item ${index===4&&'no_border'}`}>{item}</div>)
            })
          }

        </div>
        <div ref={(r) => this.chartRef = r} className="charts-container-content">

        </div>
      </div>
    )
  }
}

D3GroupedBarChart.propTypes = {
  data: PropTypes.arrayOf(PropTypes.shape({
    date: PropTypes.string.isRequired,
    q1: PropTypes.number,
    q2: PropTypes.number,
    q3: PropTypes.number,
    q4: PropTypes.number
  }).isRequired).isRequired,
}


export default D3GroupedBarChart;
